<template>
  <div>
    <div v-if="orderList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text=""
          error-text="请求失败，点击重新加载"
          :error.sync="error"
          @load="getOrder"
        >
          <template v-for="(item, index) in orderList">
            <van-cell :key="index" class="gl_mt_10 gl_mx_10 order">
              <div class="order_img">
                <img v-if="item.pathImages" :src="getStaticFileUrl(item.pathImages)" alt="" style="width:100%;height:100%">
              </div>
              <div class="order_text gl_ml_10">
                <div>
                  <div class="order_span">订单号：<span>{{ item.orderNo }}</span></div>
                </div>
                <div class="gl_my_5 gl_ft_weight order_name">{{ item.name }}</div>
                <div>
                  <van-tag plain type="primary">
                    <template v-for="ktem in dict.orderType">
                      {{ ktem.code === item.orderTypeCode ? ktem.value : '' }}
                    </template>
                  </van-tag>
                  <span class="gl_pl_10">
                    <van-tag v-if="item.isOnlinePayment" plain type="primary">线上支付</van-tag>
                    <van-tag v-else plain type="primary">线下支付</van-tag>
                  </span>
                </div>
              </div>
              <van-divider />
              <div class="order_operation">
                <div class="right">
                  <van-button type="info" size="small" @click="detail(item.orderNo)">查看详情</van-button>
                  <van-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY'" class="gl_ml_15" type="warning" size="small" @click="cancelOrder(item.orderNo)">取消订单</van-button>
                  <van-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY' && item.isOnlinePayment" class="gl_ml_15" type="primary" size="small" @click="detail(item.orderNo)">支付</van-button>
                  <van-button v-if="item.orderStatusCode == 'WAIT_BUYER_PAY' && !item.isOnlinePayment" :loading="offlineBtnLoading" loading-text="付款方式查看" class="gl_ml_15" type="primary" size="small" @click="showOfflinePayInfo(item.orderNo)">付款方式查看</van-button>
                </div>
              </div>
            </van-cell>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <div v-else>
      <van-empty description="暂无数据" />
    </div>
    <!-- 支付方式弹出层 -->
    <van-popup v-model="offlineDialogVisible" class="pay_type" style="width:90%">
      <offline-pay-info :offline-data="offlineData" :is-show-btn="false" />
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import OfflinePayInfo from '@/viewMobile/components/OfflinePayInfo';
import {
  api_GET_TradePersonalOrderList,
  api_PUT_TradeCancellationOfOrder,
  api_GET_TradePersonalOrderCollectionCode // 获取线下支付订单的收款码信息
} from '@/extend/api/swaggerApi/app.js';
import {
  Api_GET_TradePersonalOrderListQO
} from '@/lib/form/swaggerForm';
export default {
  components: {
    OfflinePayInfo
  },
  props: {
    orderStatusCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      gameId: '',
      Api_GET_TradePersonalOrderListQO: new Api_GET_TradePersonalOrderListQO(),
      orderList: [],
      refreshing: false,
      finished: false,
      totalPage: 0,
      currentPage: 1,
      error: false,
      offlineDialogVisible: false,
      offlineBtnLoading: false,
      offlineData: {}
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getDict();
    this.getOrder();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取订单列表
    getOrder(value) {
      var that = this;
      that.finished = false;
      if (that.refreshing) {
        that.orderList = [];
        that.refreshing = false;
        that.Api_GET_TradePersonalOrderListQO.Page = 1;
      }
      that.Api_GET_TradePersonalOrderListQO.SkipCount = (that.Api_GET_TradePersonalOrderListQO.Page - 1) * that.Api_GET_TradePersonalOrderListQO.MaxResultCount;

      if (that.orderStatusCode === '') {
        that.Api_GET_TradePersonalOrderListQO.OrderStatusCode = that.dict.orderStatus[0].code;
      } else {
        that.Api_GET_TradePersonalOrderListQO.OrderStatusCode = that.orderStatusCode;
      }
      that.Api_GET_TradePersonalOrderListQO.OrderNameOrOrderNo = value || '';
      api_GET_TradePersonalOrderList(that.Api_GET_TradePersonalOrderListQO)
        .then(res => {
          var _data = res.items || [];
          var _total = res.totalCount;
          that.orderList = that.orderList.concat(_data);
          that.loading = false;
          if (_total > that.orderList.length) {
            that.Api_GET_TradePersonalOrderListQO.Page += 1;
          } else {
            that.finished = true;
          }
        }).catch(() => {
          that.error = true;
          that.loading = false;
        });
    },
    // 去详情内支付
    detail(id) {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/order/detail`,
        query: { id: id }
      });
    },
    // 取消订单
    cancelOrder(id) {
      var that = this;
      that.$dialog.confirm({
        message: '您确定要取消该订单吗？'
      }).then(() => {
        const data = { orderNo: id };
        api_PUT_TradeCancellationOfOrder(data)
          .then(res => {
            that.$notify({ type: 'success', message: '取消成功' });
            that.refreshing = true;
            that.getOrder();
          }).catch(() => {
            that.$notify({ type: 'error', message: '取消失败' });
          });
      }).catch(() => {
        that.$notify({ type: 'primary', message: '放弃取消' });
      });
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.getOrder();
    },
    // 图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 付款方式查看
    showOfflinePayInfo (orderNo, data) {
      this.offlineBtnLoading = true;
      this.getOrderDetails(orderNo);
    },
    // 获取订单详情，用于线下支付展示收款账户信息
    getOrderDetails (orderNo) {
      this.loading = true;
      api_GET_TradePersonalOrderCollectionCode({ orderNo: orderNo })
        .then(
          res => {
            this.offlineBtnLoading = false;
            this.loading = false;
            res._orderNo = orderNo;
            this.offlineData = res;
            this.offlineDialogVisible = true;
          }
        )
        .catch(
          error => {
            this.offlineBtnLoading = false;
            this.loading = false;
            this.$toast.fail(`${error.error.message}`);
          }
        );
    }
  }
};
</script>
<style lang="scss" scoped>
.order {
  border-radius: 4px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
  padding: 10px;
  position: relative;
  width: auto;
  // min-height: 180px;
  .order_img {
    width: 60px;
    height: 60px;
    border: 1px solid #DCDFE6;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
  }
  .order_text {
    line-height: 18px;
    display: inline-block;
    font-size: 14px;
    .space_between {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .order_name {
      width: 265px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .order_operation {
    height: 34px;
  }
}
.van-button {
  border-radius: 6px;
  // width: 80px;
}
.order_span {
  color: #666666;
  font-size: 12px;
}
.right {
  float: right;
}
</style>
